<template>
  <div class="carousel-top">
    <el-carousel
      :height="config.height || default_config.height"
      :direction="config.direction || default_config.direction"
      :autoplay="config.autoplay || default_config.autoplay"
      :interval="config.interval || default_config.interval"
    >
      <el-carousel-item v-for="item in 3" :key="item">
        <h3 class="medium">Banner{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "carousel-top",
  props: {
    config: { typeof: Object }
  },
  data() {
    return {
      default_config: {
        direction: "vertical",
        interval: 5000,
        autoplay: true,
        height: "200px"
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.carousel-top {
  .el-carousel__item h3 {
    color: #fff;
    font-size: 50px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #0080ff;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #41a0ff;
  }
}
</style>
